<template>
    <div class="panel-fullmodal" v-if="fullScreenDisplay">
        <div class="fullcloth"></div>
        <div class="full-cnt">
            <div class="full-content fix-scrollbar grable-layout">
                <panel-details class="layout-full-show " ref="panelDetails" :panelId="onePanel.layoutId">
                    <div slot="left" class="layout-full-title">
                        <div class="f-l m-l-20">{{onePanel.layoutName}}</div>
                        <div class="f-l m-l-50">{{onePanel.createTime | time}}</div>
                    </div>
                    <div slot="right" > <i title="退出全屏" class="fa fa-close m-r-10 pointer" style="    font-size: 26px"  @click="exitFullScreen"></i></div>
                </panel-details>
            </div>
        </div>
    </div>
</template>
<script>
import panelDetails from './panel-details.vue'

export default {
    components: {
        panelDetails
    },
    props:{
        fullScreenDisplay:{
            type:Boolean,
            default:function(){
                return false
            },
        },
        onePanel:{
            type:Object,
        }
    },
    data(){
        return {
            // fullScreenDisplay:false,
        }
    },
    methods:{
        exitFullScreen(){
            this.$emit('exitFullScreen');
        },
    },
}
</script>
<style lang="less">
.panel-fullmodal{
    position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
    .layout-full-title{
        overflow: hidden;
        height: 32px;
        line-height: 32px;
    }
    .layout-content{
        border: none;
    }
    .grable-layout{
        height: calc(~'100vh - 32px');
        .show-all{
            height: 100%;
            .show-content{
                border:none;
            }
        }
    }
    .fullcloth{
        background: #f1f3f6;
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: .9;
        z-index: -1;
    }
    .full-cnt{
        margin: 0;
        width: 100%;
        .menu{
            overflow: hidden;
        }
        .close{
            color: #a3a3a3;
            font-size: 30px;
            float: right;
            cursor: pointer;
        }
        .full-content{
            margin: 0 auto;
            width: 100%;
            // height: calc(~ '117vh - 184px'); 1920
            // height: calc(~ '117vh - 127px'); //1366
            height: calc(~ '117vh - 184px');
            background: #fff;
            opacity: .96;
            // overflow-y: auto;
        }
    }
}
</style>


